<template>
	<view class="content">
		<!--顶部导航-->
		<view class="content_1" :style="{'height':titleBarHeight + 'px'}">
			<view class="title_1" :style="{'margin-top':top + 'px'}">
				<view class="title_1_icon" @click.stop="Backto">
					<image class="title_1_icon" src="../../static/order/back.png" mode="aspectFit" @click.stop="Backto"></image>
				</view>
				<view class="title_1_text" @click.stop="Backto">紫菜·可莉</view>
				<image class="search_icon" src="../../static/order/search.png" mode="aspectFit" @click="toSearch" v-show="false"></image>
			</view>
		</view>
		<!--占位-->
		<view :style="{height:spaceHeight +'px'}"></view>
		<!--店铺名-->
		<view class="content_2">
			<view class="shop_view">
				<view class="shop_view_1">
					<view class="view_left">
						<view class="shop_name_title">{{shop_name}}</view>
						<view class="shop_information">
							<view class="info_icon">公告:</view>
							<view class="info_text">{{notice}}</view>
						</view>
					</view>
					<view class="view_right" @click="showMineBox">
						<view class="mine_icon">
							<image class="mine_icon" src="../../static/order/mine.png" mode="aspectFit"></image>
						</view>
						<view class="mine_text" v-show="false">我的</view>
					</view>
				</view>
				<!-- <view class="shop_view_2">
					<view :class="[state == '1' ? 'methods_active' : 'methods']" @click="changeState(1)">到店就餐</view>
					<view :class="[state == '2' ? 'methods_active' : 'methods']" @click="changeState(2)">外卖到家</view>
					<view :class="[state == '3' ? 'methods_active' : 'methods']" @click="changeState(3)">自提订单</view>
				</view> -->
			</view>
			<!--我的弹出层-->
			<view class="mine_view" v-if="mineboxstate == 1" v-show="false">
				<view class="mine_box">
					<view class="box_list">
						<image class="box_list_icon" src="../../static/order/mine/wddd.png"></image>
						<view class="box_list_text">我的订单</view>
					</view>
					<view class="line_2"></view>
					<view class="box_list">
						<image class="box_list_icon" src="../../static/order/mine/lqzx.png"></image>
						<view class="box_list_text">领券中心</view>
					</view>
					<view class="line_2"></view>
					<view class="box_list">
						<image class="box_list_icon" src="../../static/order/mine/wdyhq.png"></image>
						<view class="box_list_text">卡券包</view>
					</view>
					<view class="line_2"></view>
					<view class="box_list">
						<image class="box_list_icon" src="../../static/order/mine/wddz.png"></image>
						<view class="box_list_text">我的地址</view>
					</view>
					<view class="line_2"></view>
					<view class="box_list">
						<image class="box_list_icon" src="../../static/order/mine/sjxx.png"></image>
						<view class="box_list_text">商家信息</view>
					</view>
					<view class="line_2"></view>
					<view class="box_list">
						<image class="box_list_icon" src="../../static/order/mine/wdxx.png"></image>
						<view class="box_list_text">我的信息</view>
					</view>
				</view>
			</view>
		</view>
		<!--轮播-->
		<view class="content_3">
			<!-- <swiper style="height: 196upx; width: 750upx;" circular="true">
				<block v-for="(Banner, index_banner) in bannerList" :key="index_banner">
					<swiper-item class="swiper_view">
						<image style="height: 196upx; width: 700upx; margin: 0 auto;" :src="Banner.show_image"></image>
					</swiper-item>
				</block>
			</swiper> -->
		</view>
		<!--商品列表-->
		<view class="content_4" :style="{height:shoptypeHeight + 'px'}">
			<!--类别-->
			<scroll-view scroll-y class="shop_type_view">
				<block v-for="(shopType, index_shoptype) in shopTypeList" :key="index_shoptype">
					<view class="shop_type_box" :class="{'shop_type_box_active': typeIndex == index_shoptype}" @click="changeView(index_shoptype)">
						<image class="type_icon" :src="shopType.group_icon" mode="aspectFit"></image>
						<view class="type_name">{{shopType.group_name}}</view>
					</view>
				</block>
				<!--占位-->
				<view style="height: 150upx;"></view>
			</scroll-view>
			<!--商品-->
			<scroll-view scroll-y style="width: 100%; height: 100%;" @scrolltolower="loadMore_shop">
				<block v-for="(shop, index_shop) in shopList" :key="index_shop">
					<view class="shop_list_box">
						<image class="shop_img" mode="aspectFill" :src="shop.cover_image"></image>
						<view class="shop_detail">
							<view class="shop_name">{{shop.goods_name}}</view>
							<view class="shop_parameter">{{shop.goods_desc}}</view>
							<view class="shop_state_view">
								<!-- <view class="sales_view">{{shop.label.label_one}}</view> -->
								<view class="play_view">{{shop.label.label_two}}</view>
								<!-- <view class="play_view">{{shop.label.label_three}}</view> -->
							</view>
							<view class="shop_sales">销量{{shop.total_sales}}</view>
							<view class="shop_price_num">
								<view class="price_view">
									<view class="price_1">￥{{shop.sell_price}}</view>
									<view class="price_0">{{shop.origin_price}}</view>
								</view>
								<view class="num_view">
									<image class="sub" @click="subnum(index_shop)" src="../../static/order/sub.png"></image>
									<view class="shop_num">{{shop.product_amount}}</view>
									<image class="add" @click="addnum(index_shop)" src="../../static/order/add.png"></image>
								</view>
							</view>
						</view>
					</view>
				</block>
				<!--占位-->
				<view style="height: 150upx;"></view>
			</scroll-view>
		</view>
		<!--底部结算-->
		<view class="content_5" v-if="openstate == 1">
			<view class="shop_car">
				<view class="shopcar_box" @click="showShopcar">
					<image class="shopcar_icon" src="../../static/order/shopcar.png"></image>
					<view class="shopcar_num" v-show="shopcarnums != 0">{{shopcarnums}}</view>
				</view>
				<view class="shopcar_price">
					<view class="price_box">
						<view style="font-size: 24upx; color: #2D2D2D;line-height: 46upx;margin-top: 8upx;">￥</view>
						<view style="font-size: 38upx; color: #2D2D2D;line-height: 46upx;margin-right: 10upx;">{{total_price}}</view>
						<view style="font-size: 26upx; color: #969696;line-height: 46upx;text-decoration: line-through;margin-top: 6upx;">￥优惠价</view>
					</view>
					<view class="freight">另需配送费0元</view>
				</view>
			</view>
			<view class="shop_button" @click="topay">去结算</view>
		</view>
		<!--判断店铺状态-->
		<view class="content_5" style="background-color: #272727;" v-if="openstate == -1">
			<view class="openstate">本店打烊了</view>
		</view>
		<!--已满减 v-if="openstate == 1" -->
		<view class="content_6" v-if="false">
			<view style="font-size: 20upx;color: #2D2D2D;font-weight: bold;">已减22.1元</view>
			<view style="font-size: 20upx;color: #595959;">已包含：配送费{{send_cost}}、商品优惠</view>
		</view>
		<!--判断店铺状态-->
		<view class="content_6" v-if="openstate == -1">
			<view style="font-size: 20upx;color: #595959;">本店已打烊，营业时间为{{begin_time}}-{{end_time}}</view>
		</view>
		<!--点击购物车按钮显示遮罩层-->
		<view class="content_7" v-if="showshopcar == '1'">
			<view class="shopcartitle_view">
				<view class="shopcar">购物车</view>
				<view class="shopcarnum">(共{{shopcarnums}}件物品)</view>
				<!-- <view class="countprice">已优惠7.5元</view> -->
				<view class="countprice">紫菜·蛋卷</view>
				<view class="delshopcar" @click="clearshopcar">清空</view>
			</view>
			<scroll-view scroll-y style="height: 486upx;">
				<block v-for="(shopcaritem, index_shopcaritem) in shopcaritemList" :key='index_shopcaritem'>
					<view class="shopcar_detail">
						<image class="shopcar_img" :src="shopcaritem.cover_image"></image>
						<view class="shopcar_shopdetail">
							<view class="shopcar_shopname">{{shopcaritem.goods_name}}</view>
							<view class="shopcar_shoppara">{{shopcaritem.goods_desc}}</view>
							<view class="shopcar_shopprice_num">
								<view class="shopcar_shopprice">
									<view class="shopcar_newprice">￥{{shopcaritem.sell_price}}</view>
									<view class="shopcar_oldprice">￥{{shopcaritem.origin_price}}</view>
									<view class="shopcar_count">
										<view class="shopcar_sanjiao"></view>
										<view class="shopcar_countnum">{{shopcaritem.discount}}</view>
									</view>
								</view>
								<view class="num_view">
									<image class="sub" @click="subshopnum(index_shopcaritem)" src="../../static/order/sub.png"></image>
									<view class="shop_num">{{shopcaritem.goods_amount}}</view>
									<image class="add" @click="addshopnum(index_shopcaritem)" src="../../static/order/add.png"></image>
								</view>
							</view>
						</view>
					</view>
				</block>
				<view style="height: 50upx;"></view>
			</scroll-view>
		</view>
		<view class="background_7" v-if="showshopcar == '1'" @click="showShopcar"></view>
	</view>
</template>

<script>
	//引入request.js
	import {
		Request
	} from '../../utils/request.js';
	import api from "@/utils/api.js";
	var app = getApp()
	//懒加载
	let seach_number = 3
	let page = 3

	export default {
		data() {
			return {
				//我的 弹出层
				mineboxstate: '0',
				//店铺状态
				openstate: '1',
				titleBarHeight: '',
				spaceHeight: '',
				top: '',
				shoptypeHeight: '',
				state: '1',
				typeIndex: '0',
				showshopcar: '0',
				//购物车商品数量
				shopcarnums: 0,
				arr: [
					[],
					[]
				],
				//轮播图列表	
				bannerList: [],
				//商品分类列表
				shopTypeList: [],
				//商品分类id
				shopTypeid: '',
				//商品详细
				shopList: [],
				//购物车列表
				shopcaritemList: [],
				//商品总价
				total_price: '',
				//店铺名
				shop_name: '',
				//店铺公告
				notice: '',
				//营业时间
				begin_time: '',
				//打烊时间
				end_time: '',
				//配送费
				send_cost: ''
			}
		},
		onLoad() {
			//获取窗口高度
			uni.getSystemInfo({
				success: (res) => {
					this.top = res.statusBarHeight - uni.upx2px(30)
					this.titleBarHeight = res.statusBarHeight + 22
					this.spaceHeight = res.statusBarHeight + 38
					this.shoptypeHeight = res.windowHeight - uni.upx2px(590)
				},
			});
			let that = this;
			//装入函数里面
			let Getlist = function() {
				//获取商品分类列表
				seach_number = 3
				page = 3
				new Request('goodsinfo/Get_Group/GetGroupList').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							shop_id: 1,
							DevelopVersion: app.globalData.DevelopVersion,
							project: app.globalData.project
						}
					},
					(res) => {
						that.shopTypeList = res.data.data
						//页面加载,获取第一个分类的商品详细
						new Request('goodsinfo/Get_Group/GetGoodsList').request(
							() => {
								return 'POST'
							},
							() => {
								return {
									openid: app.globalData.openid,
									shop_id: '1',
									group_id: that.shopTypeList[0].group_id,
									seach_number: seach_number,
									page: 0,
									DevelopVersion: app.globalData.DevelopVersion,
									project: app.globalData.project
								}
							},
							(res) => {
								that.shopList = res.data.data
								that.shopTypeid = that.shopTypeList[0].group_id
							}
						)
					}
				)
				//用户进入,加载购物车
				new Request('orderinfo/order_Cart/GetOrderCartList').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							openid: app.globalData.openid,
							shop_id: '1',
							DevelopVersion: app.globalData.DevelopVersion,
							project: app.globalData.project
						}
					},
					(res) => {
						if (res.data.code == -1) {
							new Request().showToast('当前是游客身份');
						} else if (res.data.code = 1) {
							that.shopcaritemList = res.data.data
							that.shopcarnums = res.data.cart_total
							that.total_price = res.data.data == 0 ? 0 : res.data.total_price
						}
					}
				);

				//加载店铺详细
				new Request('shopinfo/Get_Shop_Info/GetShopInfo').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							shop_id: '1',
							DevelopVersion: app.globalData.DevelopVersion,
							project: app.globalData.project
						}
					},
					(res) => {
						console.log(res)
						that.bannerList = res.data.banner
						that.shop_name = res.data.data.shop_name
						that.notice = res.data.data.notice
						that.openstate = res.data.switch.status
						that.begin_time = res.data.data.begin_time
						that.end_time = res.data.data.end_time
						that.send_cost = res.data.data.send_cost
					}
				)
			}
			uni.login({
				success: (res) => {
					console.log('成功')
					//获取openid,用户信息接口
					new Request('User_Login/GetUserOpendInfoAndRegister').request(
						() => {
							return 'POST';
						},
						() => {
							return {
								code: res.code,
								DevelopVersion: app.globalData.DevelopVersion,
								project: app.globalData.project,
							}
						},
						(res) => {
							app.globalData.Logincode = res.data.data.LoginCode;
							app.globalData.openid = res.data.data.openid;
							Getlist();
						}
					);
				},
				fail: (err) => {
					console.log(err)
					console.log('失败')
				}
			});
		},
		methods: {
			//获取图片路径
			getPath: function(imagePath) {
				return "https://taketwo.zyfuns.com" + imagePath
			},
			//返回
			Backto: function() {
				uni.showToast({
					position: 'center',
					icon: 'none',
					title: '紫菜小店 哪里跑~',
				});
			},
			//跳转搜索
			toSearch: function() {
				uni.navigateTo({
					url: '/pages/order/search/search'
				})
			},
			//跳转结算,调用创建订单接口
			topay: function() {
				console.log(api)
				if (app.globalData.Logincode == -1) {
					//当前用户没有登陆不能进行下一步操作
					new Request().GoToLoginPage();
					return;
				}
				//判断购物车不为空
				if (!this.shopcaritemList.length) {
					new Request().showToast('哎呀小车车全是空的 都没有购物车吖~')
					return;
				}
				//参考：https://www.cnblogs.com/522040-m/p/14160533.html
				this.cartList = this.shopcaritemList.map((item, index) => {
					return {
						'goods_id': item.goods_id,
						'product_amount': item.goods_amount
					}
				})
				uni.request({
					url: api.payMoney.route,//支付接口
					method: 'POST',
					data: {
						openid: app.globalData.openid,
						shop_id: '1',
						carts_id: this.cartList,
						DevelopVersion: app.globalData.DevelopVersion,
						project: app.globalData.project
					},
					success: (res) => {
						if (res.data.code == -1) {
							//当前用户没有登陆不能进行下一步操作
							new Request().GoToLoginPage();
						}
						console.log(res)
						//创建成功,跳转支付页面
						if (res.data.code = '1') {
							this.order_id = res.data.order_id
							uni.navigateTo({
								url: '/pages/order/confirm/confirm?order_id=' + this.order_id
							})
						} else {
							new Request().showToast('创建订单失败')
						}
					}
				})
			},
			//显示、隐藏我的详细
			showMineBox: function() {
				if (this.mineboxstate == '0') {
					this.mineboxstate = '1'
				} else {
					this.mineboxstate = '0'
				}
			},
			//显示、隐藏购物车
			showShopcar: function() {
				if (this.shopcarnums == 0) {
					uni.showToast({
						position: 'center',
						icon: 'none',
						title: '哎呀全都为空啦，快带可莉到购物车里吧~',
					});
				} else {
					if (this.showshopcar == '0') {
						this.showshopcar = '1'
					} else {
						this.showshopcar = '0'
					}
				}
			},
			//传值，切换
			changeState: function(id) {
				this.state = id
			},
			//点击类别切换,显示商品
			changeView: function(index) {
				this.typeIndex = index
				new Request('goodsinfo/Get_Group/GetGoodsList').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							openid: app.globalData.openid,
							shop_id: '1',
							group_id: this.shopTypeList[index].group_id,
							seach_number: seach_number,
							page: 0,
							DevelopVersion: app.globalData.DevelopVersion,
							project: app.globalData.project,
						}
					},
					(res) => {
						this.shopList = res.data.data
						this.shopTypeid = this.shopTypeList[index].group_id
					}
				)
			},
			//scroll-view商品列表触底加载更多
			loadMore_shop: function(e) {
				var that = this
				setTimeout(function() {
					new Request('goodsinfo/Get_Group/GetGoodsList').request(
						() => {
							return 'POST'
						},
						() => {
							return {
								openid: app.globalData.openid,
								shop_id: '1',
								group_id: that.shopTypeid,
								seach_number: seach_number,
								page: page,
								DevelopVersion: app.globalData.DevelopVersion,
								project: app.globalData.project
							}
						},
						(res) => {
							if (res.data.code == 0) {
								uni.showToast({
									title: '没有更多数据了',
									position: 'center',
									icon: 'none'
								})
							} else {
								page += seach_number
								uni.showToast({
									title: '加载中...',
									icon: 'loading',
									duration: 300,
								})
								var that = this
								setTimeout(function() {
									that.shopList = that.shopList.concat(res.data.data)
								}, 300);
							}
						}
					)
				}, 300);
			},
			//禁止用户滑动滑块
			stopTouch: function() {
				return true;
			},
			//购物车商品数量 减库存
			subshopnum: function(id) {
				if (this.shopcaritemList[id].goods_amount == '0') {

				} else {
					new Request('orderinfo/order_Cart/CreateOrderCart').request(
						() => {
							return 'POST'
						},
						() => {
							return {
								openid: app.globalData.openid,
								shop_id: '1',
								goods_id: this.shopcaritemList[id].goods_id,
								cart_type: 'reduce',
								DevelopVersion: app.globalData.DevelopVersion,
								project: app.globalData.project
							}
						},
						(res) => {
							if (res.data.code == '-1') {
								new Request().showToast('当前是游客身份', 'none', () => {
									/**
									 * 用户还没有注册跳转登陆页面
									 */
									setTimeout(function() {
										uni.switchTab({
											url: '/pages/mine/mine'
										});
									}, 2001);
								})
								return;
							} else if (res.data.code == '1') {
								//调用商品详细接口,动态更新(默认第一个分类)
								this.shopcaritemList[id].goods_amount--
								new Request('goodsinfo/Get_Group/GetGoodsList').request(
									() => {
										return 'POST'
									},
									() => {
										return {
											openid: app.globalData.openid,
											shop_id: '1',
											group_id: this.shopTypeList[0].group_id,
											seach_number: seach_number,
											page: 0,
											DevelopVersion: app.globalData.DevelopVersion,
											project: app.globalData.project
										}
									},
									(res) => {
										this.shopList = res.data.data
										this.typeIndex = '0'
									}
								)
								//调用购物车接口,更新总价
								new Request('orderinfo/order_Cart/GetOrderCartList').request(
									() => {
										return 'POST'
									},
									() => {
										return {
											openid: app.globalData.openid,
											shop_id: '1',
											DevelopVersion: app.globalData.DevelopVersion,
											project: app.globalData.project
										}
									},
									(res) => {
										if (res.data.data == 0) {
											this.showshopcar = 0;
										}
										this.total_price = res.data.data == 0 ? 0 : res.data.total_price;
										this.shopcaritemList = res.data.data;
										this.shopcarnums = res.data.cart_total;
									}
								)
							}
						}
					)
				}
			},
			//购物车商品数量 加库存
			addshopnum: function(id) {
				if (this.shopcaritemList[id].goods_amount == '9') {
					new Request().showToast('商品一次最多购买9个哦', 'none', () => {})
				} else {
					new Request('orderinfo/order_Cart/CreateOrderCart').request(
						() => {
							return 'POST'
						},
						() => {
							return {
								openid: app.globalData.openid,
								shop_id: '1',
								goods_id: this.shopcaritemList[id].goods_id,
								cart_type: 'add',
								DevelopVersion: app.globalData.DevelopVersion,
								project: app.globalData.project
							}
						},
						(res) => {
							if (res.data.code == '-1') {
								new Request().showToast('当前是游客身份', 'none', () => {
									/**
									 * 用户还没有注册跳转登陆页面
									 */
									setTimeout(function() {
										uni.switchTab({
											url: '/pages/mine/mine'
										});
									}, 2001);
								})
								return;
								// new Request().showToast('当前是游客身份', 'none', () => {})
							} else if (res.data.code == '1') {
								//调用商品详细接口,动态更新(默认第一个分类)
								this.shopcaritemList[id].goods_amount++
								new Request('goodsinfo/Get_Group/GetGoodsList').request(
									() => {
										return 'POST'
									},
									() => {
										return {
											openid: app.globalData.openid,
											shop_id: '1',
											group_id: this.shopTypeList[0].group_id,
											seach_number: seach_number,
											page: 0,
											DevelopVersion: app.globalData.DevelopVersion,
											project: app.globalData.project
										}
									},
									(res) => {
										this.shopList = res.data.data
										this.typeIndex = '0'
									}
								)
							}
							//调用购物车接口,更新总价
							new Request('orderinfo/order_Cart/GetOrderCartList').request(
								() => {
									return 'POST'
								},
								() => {
									return {
										openid: app.globalData.openid,
										shop_id: '1',
										DevelopVersion: app.globalData.DevelopVersion,
										project: app.globalData.project
									}
								},
								(res) => {
									this.total_price = res.data.data == 0 ? 0 : res.data.total_price;
									this.shopcaritemList = res.data.data;
								}
							)
						}
					)
				}
			},
			/*
			*调用增减商品接口
			*@param {int} index_s 序号
			**/
			subnum: function(index_s) {
				
				if (this.openstate == '-1') return new Request().showToast('店铺已经打烊了', 'none', () => {})
					// if (this.shopList[index_s].product_amount == '0') {
					new Request('orderinfo/order_Cart/CreateOrderCart').request(
						() => {
							return 'POST'
						},
						() => {
							return {
								openid: app.globalData.openid,
								shop_id: '1',
								goods_id: this.shopList[index_s].goods_id,
								cart_type: 'reduce'//商品列表减扣
							}
						},
						(res) => {
							console.log('zheshi1',this.shopList)
							if (res.data.code == '-1') return new Request().showToast('当前是游客身份', 'none', () => {})
							//调用购物车接口,达到动态更新购物车效果
							if(this.shopList[index_s].product_amount <= 0) return new Request().showToast('可莉要哭了 全都没有啦~', 'none', () => {})
							this.shopList[index_s].product_amount--
							new Request('orderinfo/order_Cart/GetOrderCartList').request(
								() => {
									return 'POST'
								},
								() => {
									return {
										openid: app.globalData.openid,
										shop_id: '1'
									}
								},
								(res) => {
									if (res.data.code == '-1') return new Request().showToast('当前是游客身份', 'none', () => {})
									
									this.shopcaritemList = res.data.data
									this.shopcarnums = res.data.cart_total
									this.total_price = res.data.data == 0 ? 0 : res.data.total_price
								}
							)
						}
					)
			},
			//调用增减商品接口
			addnum: function(index_s) {
				if (app.globalData.Logincode == -1) return new Request().GoToLoginPage();
				if (this.openstate == '-1') return new Request().showToast('店铺已经打烊了', 'none', () => {})
				if (this.shopList[index_s].product_amount == '9') return new Request().showToast('商品一次最多购买9个哦', 'none', () => {})
				new Request('orderinfo/order_Cart/CreateOrderCart').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							openid: app.globalData.openid,
							shop_id: '1',
							goods_id: this.shopList[index_s].goods_id,
							cart_type: 'add'
						}
					},
					(res) => {
						if (res.data.code != 1) {
							new Request().showToast('当前是游客身份', 'none', () => {
								/**用户还没有注册跳转登陆页面*/
								setTimeout(function() {
									uni.switchTab({
										url: '/pages/mine/mine'
									});
								}, 2001);
							})
							return;
						} 
						//调用购物车接口,达到动态更新购物车效果
						this.shopList[index_s].product_amount++
						new Request('orderinfo/order_Cart/GetOrderCartList').request(
							() => {
								return 'POST'
							},
							() => {
								return {
									openid: app.globalData.openid,
									shop_id: '1'
								}
							},
							(res) => {
								if (res.data.code == '-1') return new Request().showToast('用户没有登录', 'none', () => {})
								
								this.shopcaritemList = res.data.data
								this.shopcarnums = res.data.cart_total
								this.total_price = res.data.data == 0 ? 0 : res.data.total_price
							}
						)
					}
				)
			},
			//清空购物车，清除缓存
			clearshopcar: function() {
				this.shopcarnums = 0; 
				this.showshopcar = 0;
				this.shopcaritemList = null
				this.shopList.map((item, index) => {
					item.product_amount = 0
				})
				//调用清空购物车接口
				new Request('orderinfo/Delete_Order_Cart/DeleteCart').request(
					() => {
						return 'POST';
					},
					() => {
						return {
							openid: app.globalData.openid,
						}
					},
					(res) => {
						if (res.data.code == 1 || res.data.code == 0) {
							this.total_price = 0;
						}
					}
				);
			}
		},
		//隐藏tabBar
		onShow() {
			// uni.hideTabBar();
		},
		//页面隐藏
		onHide() {
			//显示tabBar
			console.log('页面隐藏了')
		},
		//页面卸载
		onUnload() {
			//显示tabBar
			console.log('页面卸载了');
			//清空购物车，清除缓存
			this.clearshopcar();
		}
	}
</script>

<style scoped>
	.content {}

	/*
		顶部导航样式
	*/
	.content_1 {
		width: 750upx;
		background-image: linear-gradient(#E03507, #D92200); //颜色渐变效果(上下)
		text-align: center;
		padding-top: 48upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: fixed;
		z-index: 996;
	}

	.title_1 {
		height: 45upx;
		color: #FFFFFF;
		font-size: 32upx;
		position: absolute;
		left: 25upx;
		top: 50upx;
		display: flex;
		align-items: center;
	}

	.title_1_icon {
		width: 20upx;
		height: 35upx;
		margin-right: 25upx;
	}

	.title_1_text {
		height: 45upx;
		font-size: 32upx;
		line-height: 45upx;
		color: #FFFFFF;
	}

	.search_icon {
		height: 35upx;
		width: 35upx;
		margin-left: 360upx;
	}

	/*
		店铺名样式
	*/
	.content_2 {
		height: 110upx;
		background-image: linear-gradient(#D92200, #C61500); //颜色渐变效果(上下)
		padding-top: 20upx;
	}

	.shop_view {
		height: 185upx;
		background-color: #FFFFFF;
		margin: 0upx 25upx;
		border-radius: 30upx;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
		padding: 0upx 35upx;
		padding-top: 35upx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.shop_view_1 {
		height: 95upx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.shop_view_2 {
		height: 55upx;
		width: 560upx;
		margin-top: 20upx;
		padding: 0upx 35upx;
		display: flex;
		align-content: center;
		justify-content: space-between;
	}

	.view_left {
		height: 90upx;
		width: 510upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.view_right {
		height: 90upx;
		width: 50upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.shop_name_title {
		font-size: 36upx;
		font-weight: bold;
		line-height: 60upx;
	}

	.shop_information {
		height: 36upx;
		display: flex;
		align-items: center;
	}

	.info_icon {
		height: 36upx;
		width: 68upx;
		background-color: #FFEEEE;
		line-height: 36upx;
		color: #FA242C;
		font-size: 24upx;
		text-align: center;
		margin-right: 25upx;
	}

	.info_text {
		height: 34upx;
		line-height: 34upx;
		font-size: 24upx;
		color: #595959;
	}

	.mine_icon {
		width: 50upx;
		height: 50upx;
	}

	.mine_text {
		height: 35upx;
		font-size: 24upx;
		color: #FF3D44;
		line-height: 35upx;
		text-align: center;
	}

	.methods {
		width: 200upx;
		height: 55upx;
		border-radius: 55upx;
		color: #D1121A;
		font-size: 26upx;
		line-height: 55upx;
		text-align: center;
	}

	.methods_active {
		width: 200upx;
		height: 55upx;
		background-color: #E9151E;
		border-radius: 55upx;
		color: #FFFFFF;
		font-size: 26upx;
		line-height: 55upx;
		text-align: center;
	}

	/*
		我的弹出层
	*/
	.mine_view {
		position: fixed;
		z-index: 9999;
		width: 260upx;
		height: 400upx;
		right: 50upx;
		top: 260upx;
	}

	.mine_box {
		position: relative;
		width: 260upx;
		height: 370upx;
		box-shadow: 0upx 6upx 12upx rgba(0, 0, 0, 0.24);
		border-radius: 15upx;
		background-color: #FFFFFF;
		margin-top: 20upx;
		display: flex;
		flex-direction: column;
	}

	.mine_box::after {
		position: absolute;
		display: inline-block;
		top: -15upx;
		left: 200upx;
		width: 0;
		height: 0px;
		content: '';
		border-style: solid;
		border-width: 15upx;
		border-color: #fff #fff transparent transparent;
		transform: rotate(-45deg);
		box-shadow: 2upx -2upx 5upx #eeeeee;
	}

	.line_2 {
		height: 2upx;
		width: 100%;
		background-color: #F3F3F3;
	}

	.box_list {
		height: 32upx;
		width: 230upx;
		padding: 15upx 0upx;
		padding-left: 30upx;
		display: flex;
		align-items: center;
	}

	.box_list_icon {
		width: 30upx;
		height: 30upx;
		margin-right: 25upx;
	}

	.box_list_text {
		height: 35upx;
		line-height: 35upx;
		font-size: 24upx;
		color: #595959;
	}

	/*
		轮播样式
	*/
	.content_3 {
		height: 60upx;
		margin-top: 60upx;
	}

	.swiper_view {
		height: 196upx;
		width: 500upx;
		display: flex;
	}


	/*
		商品列表样式
	*/
	.content_4 {
		margin-top: 30upx;
		display: flex;
	}

	.shop_type_view {
		height: 100%;
		width: 25%;
		background-color: #F7F8FA;
	}

	.shop_list_view {
		width: 100%;
		width: 75%;
		background-color: #FFFFFF;
	}

	.shop_type_box {
		height: 90upx;
		width: 180upx;
		background-color: #F7F8FA;
		display: flex;
		align-items: center;
		padding-left: 15upx;
	}

	.shop_type_box_active {
		height: 90upx;
		width: 180upx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		padding-left: 15upx;
	}

	.type_icon {
		width: 35upx;
		height: 35upx;
		margin-right: 15upx;
	}

	.type_name {
		height: 32upx;
		line-height: 32upx;
		font-size: 22upx;
		color: #2D2D2D;
		font-weight: bold;
	}

	.shop_list_box {
		height: 205upx;
		margin: 0 25upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.shop_img {
		width: 180upx;
		height: 180upx;
		border-radius: 12upx;
		background-color: #C8C7CC;
	}

	.shop_detail {
		width: 310upx;
		height: 180upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.shop_name {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #2D2D2D;
	}

	.shop_parameter {
		height: 28upx;
		line-height: 28upx;
		font-size: 20upx;
		color: #999999;
	}

	.shop_state_view {
		height: 36upx;
		display: flex;
	}

	.shop_sales {
		height: 28upx;
		line-height: 28upx;
		font-size: 20upx;
		color: #999999;
	}

	.shop_price_num {
		height: 40upx;
		display: flex;
		justify-content: space-between;
	}

	.sales_view {
		height: 36upx;
		line-height: 36upx;
		font-size: 20upx;
		border-radius: 8upx;
		color: #EA851D;
		text-align: center;
		margin-right: 10upx;
		padding: 0 8upx;
		background-color: #FEF8E0;
	}

	.play_view {
		height: 36upx;
		line-height: 36upx;
		font-size: 20upx;
		border-radius: 8upx;
		color: #FA242C;
		text-align: center;
		margin-right: 10upx;
		padding: 0 8upx;
		background-color: #FFE4E5;
	}

	.price_view {
		height: 40upx;
		display: flex;
	}

	.price_1 {
		font-size: 32upx;
		color: #D1121A;
		height: 40upx;
		line-height: 40upx;
		margin-right: 20upx;
	}

	.price_0 {
		font-size: 22upx;
		color: #595959;
		height: 32upx;
		line-height: 32upx;
		margin-top: 8upx;
		text-decoration: line-through; //删除线
	}

	.num_view {
		width: 120upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.sub {
		width: 40upx;
		height: 40upx;
	}

	.shop_num {
		font-size: 32upx;
		font-weight: bold;
		color: #3d3d3d;
		height: 40upx;
		line-height: 40upx;
	}

	.add {
		width: 40upx;
		height: 40upx;
	}

	/*
		底部结算样式
	*/
	.content_5 {
		position: fixed;
		z-index: 999;
		left: 0upx;
		bottom: 0upx;
		width: 705upx;
		height: 100upx;
		background-color: #FFFFFF;
		padding: 0 25upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.shop_car {
		width: auto;
		height: 100upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.shop_button {
		height: 72upx;
		width: 232upx;
		border-radius: 75upx;
		font-size: 32upx;
		color: #FFFFFF;
		font-weight: bold;
		line-height: 72upx;
		text-align: center;
		background-image: linear-gradient(to right, #FF4519, #E01B05);
	}

	.shopcar_box {
		width: 96upx;
		height: 96upx;
		border-radius: 96upx;
		box-shadow: 0px 6px 12px rgba(209, 63, 63, 0.53);
		margin-top: -20upx;
		margin-right: 15upx;
		background-image: linear-gradient(#FF4F19, #E01500); //颜色渐变效果(上下)
		display: flex;
		align-items: center;
	}

	.shopcar_icon {
		width: 80upx;
		height: 80upx;
		margin: 0 auto;
		margin-top: 10upx;
	}

	.shopcar_price {
		width: auto;
		height: 78upx;
		margin: 12upx 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.price_box {
		height: 46upx;
		display: flex;
		justify-content: space-between;
	}

	.freight {
		height: 32upx;
		font-size: 22upx;
		line-height: 32upx;
		color: #929292;
	}

	.shopcar_num {
		width: 32upx;
		height: 32upx;
		background-color: #FA5C18;
		border: 2upx solid #FFFFFF;
		border-radius: 32upx;
		font-size: 22upx;
		color: #FFFFFF;
		line-height: 32upx;
		text-align: center;
		position: absolute;
		top: -15upx;
		left: 90upx;
	}

	.openstate {
		height: 40upx;
		width: 140upx;
		line-height: 40upx;
		color: #FFFFFF;
		font-size: 28upx;
		font-weight: bold;
		margin: 0 auto;
	}

	/*
		已满减样式
	*/
	.content_6 {
		height: 50upx;
		width: 750upx;
		background-color: #FEF3F1;
		position: fixed;
		z-index: 998;
		bottom: 100upx;
		left: 0upx;
		display: flex;
		flex-direction: column;
		text-align: center;
		justify-content: space-around;
		padding: 15upx 0upx;
	}

	/*
		点击购物车显示遮罩层
	*/
	.content_7 {
		height: 566upx;
		width: 100%;
		background-color: #FFFFFF;
		position: fixed;
		z-index: 998;
		bottom: 100upx;
		left: 0upx;
		border-radius: 24upx 24upx 0upx 0upx;
		display: flex;
		flex-direction: column;
		animation: fadeInUpBig; //引入的动画样式
		animation-duration: 1s;
	}

	.shopcartitle_view {
		height: 80upx;
		width: 100%;
		background-color: #FEF3F1;
		border-radius: 24upx 24upx 0upx 0upx;
		display: flex;
		align-items: center;
		padding: 0 25upx;
	}

	.shopcar {
		height: 36upx;
		line-height: 36upx;
		font-size: 26upx;
		color: #2D2D2D;
	}

	.shopcarnum {
		height: 36upx;
		line-height: 36upx;
		font-size: 26upx;
		color: #848587;
		margin-right: 20upx;
	}

	.countprice {
		height: 36upx;
		line-height: 36upx;
		font-size: 26upx;
		color: #B21200;
		margin-right: 270upx;
	}

	.delshopcar {
		height: 36upx;
		line-height: 36upx;
		font-size: 26upx;
		color: #2D2D2D;
	}

	.shopcar_detail {
		height: 120upx;
		padding: 20upx 25upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.shopcar_img {
		height: 120upx;
		width: 120upx;
		border-radius: 12upx;
		background-color: #F5F3F6;
		margin-right: 35upx;
	}

	.shopcar_shopdetail {
		height: 120upx;
		width: 570upx;
		display: flex;
		flex-direction: column;
	}

	.shopcar_shopname {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		font-weight: bold;
		color: #2D2D2D;
	}

	.shopcar_shoppara {
		height: 28upx;
		line-height: 28upx;
		font-size: 20upx;
		color: #999999;
	}

	.shopcar_shopprice_num {
		height: 44upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.shopcar_shopprice {
		height: 44upx;
		display: flex;
		align-items: baseline;
	}

	.shopcar_newprice {
		height: 44upx;
		line-height: 44upx;
		font-size: 32upx;
		color: #D1121A;
		margin-right: 5upx;
	}

	.shopcar_oldprice {
		height: 32upx;
		line-height: 32upx;
		font-size: 22upx;
		color: #595959;
		text-decoration: line-through;
		margin-right: 8upx;
	}

	.shopcar_count {
		height: 35upx;
		display: flex;
		align-items: flex-end;
		position: relative;
		top: 8upx;
	}

	.shopcar_sanjiao {
		width: 0;
		height: 0;
		border-top: 15upx solid transparent;
		border-right: 18upx solid #D1121A;
		border-bottom: 15upx solid transparent;
	}

	.shopcar_countnum {
		height: 30upx;
		line-height: 30upx;
		font-size: 20upx;
		color: #FFFFFF;
		background-color: #D1121A;
		padding: 0upx 8upx;
	}

	.background_7 {
		position: fixed;
		z-index: 997;
		top: 0upx;
		left: 0upx;
		height: 100%;
		min-width: 100%;
		background-color: #0E0E0E;
		opacity: 0.5;
	}
</style>
